<template>
    <div style="width: 600px; margin: auto;background-color: lawngreen;">
        <h1>实例：商品导航和商品列表组件间的通信</h1>

        <div style="float: left; width: 20%;">
            <!-- 商品导航组件 -->
             <GoodsNav @handle="dadHandle"></GoodsNav>
        </div>
        <div style="float: left; width: 80%;">
            <!-- 商品展示组件 -->
             <GoodsList :list="list" ></GoodsList>
        </div>
    </div>
</template>


<script>
import GoodsList from '@/components/GoodsList.vue';
import GoodsNav from '@/components/GoodsNav.vue';

export default {
    components:{
        GoodsList,
        GoodsNav,
    },
    // 父组件向子组件船体图片路径时，传的是绝对路径，但是如果直接使用绝对路径，会加上ip和端口号，无法访问图片，
    // 因此在父组件向子组件传递图片路径时，加上require可以解决这个问题
    data() {
        return {
            goods:[
                {id:'001',cid:'1',name:'香草兄弟',src:require('@/assets/logo.png')},
                {id:'002',cid:'1',name:'香草兄弟',src:require('@/assets/logo.png')},
                {id:'003',cid:'1',name:'香草兄弟',src:require('@/assets/logo.png')},
                {id:'004',cid:'2',name:'蓝莓蛋糕',src:require('@/assets/logo.png')},
                {id:'005',cid:'2',name:'火山熔岩蛋糕',src:require('@/assets/logo.png')},
                {id:'006',cid:'2',name:'巧克力蛋糕',src:require('@/assets/logo.png')},
                {id:'007',cid:'3',name:'黑巧克力',src:require('@/assets/logo.png')},
                {id:'008',cid:'3',name:'白巧克力',src:require('@/assets/logo.png')},
                {id:'009',cid:'3',name:'黄巧克力',src:require('@/assets/logo.png')},
            ],
            list:[]
        }
    },
    mounted() {
        this.list=this.goods.slice()
    },
    methods: {
        dadHandle(val){
           this.list= this.goods.filter(v => v.cid ==val)
        },
    },
    
}
</script>